<template>
  <div id="sceniclike" class="scenic-like-container">
    <!-- 页面头部 -->
    <div class="header-section">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">
            <i class="el-icon-thumb"></i> 景点点赞管理
          </h2>
          <p class="page-subtitle">管理用户对景点的点赞数据</p>
        </div>
        <div class="total-count">
          <div class="count-card">
            <span class="count-label">总点赞数</span>
            <span class="count-value">{{ total }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索筛选区 -->
    <div class="search-filter-card">
      <div class="filter-group">
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-user"></i> 点赞用户
          </label>
          <el-input
            v-model="searchParams.username"
            placeholder="输入用户名搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-place"></i> 点赞景点
          </label>
          <el-input
            v-model="searchParams.scenicName"
            placeholder="输入景点名称搜索"
            clearable
            class="filter-input"
            @keyup.enter="handleSearch"
          />
        </div>
        <div class="filter-item">
          <label class="filter-label">
            <i class="el-icon-date"></i> 点赞时间
          </label>
          <el-date-picker
            v-model="searchParams.date"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            class="compact-date-picker"
          />
        </div>
      </div>
      
      <div class="action-buttons">
        <el-button 
          type="primary"  
          @click="handleSearch"
          class="search-btn"
        >
          查询
        </el-button>
        <el-button  
          @click="resetSearch"
          class="reset-btn"
        >
          重置
        </el-button>
        <el-button 
          type="danger" 
          
          @click="handleBatchDelete"
          :disabled="selectedIds.length === 0"
          class="batch-delete-btn"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-table-card">
      <el-table
        :data="tableData"
        border
        stripe
        highlight-current-row
        style="width: 100%"
        v-loading="loading"
        empty-text="暂无点赞数据"
        :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column 
          type="selection"
          width="55"
          align="center"
        />

        <el-table-column 
          prop="userName" 
          label="点赞用户" 
          width="150" 
          align="center"
        >
          <template #default="{ row }">
            <span class="username">{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column 
          prop="scenicAreaName" 
          label="点赞景点" 
          min-width="220"
        >
          <template #default="{ row }">
            <div class="scenic-name-cell">
              <i class="el-icon-location-outline"></i>
              <span class="scenic-name">{{ row.scenicAreaName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column 
          prop="likeTime" 
          label="点赞时间" 
          width="180" 
          align="center"
          sortable
        >
          <template #default="{ row }">
            <div class="time-cell">
             
              <span>{{ formatTime(row.likeTime) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          width="120" 
          align="center"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button 
              type="danger" 
              size="small" 
              
              @click="handleDelete(row.scenicLikeId)"
              plain
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控制 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import axios from 'axios'

export default {
  name: 'ScenicLike',
  setup() {
    const tableData = ref([])
    const loading = ref(false)
    const total = ref(0)
    const selectedIds = ref([]) // 新增：存储选中的ID数组

    const searchParams = ref({
      username: '',
      scenicName: '',
      date: ''
    })

    const pagination = ref({
      currentPage: 1,
      pageSize: 10
    })

    // 格式化时间显示
    const formatTime = (time) => {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    }

    // 获取序号
    const getSerialNumber = (index) => {
      return (pagination.value.currentPage - 1) * pagination.value.pageSize + index + 1
    }

    // 处理表格选择项变化
    const handleSelectionChange = (selection) => {
      selectedIds.value = selection.map(item => item.scenicLikeId)
    }

    // 获取点赞列表
    const fetchData = async () => {
      try {
        loading.value = true
        const response = await axios.get('/sclike/list')
        let filteredData = response.data
        
        // 前端筛选
        filteredData = filteredData.filter(item => {
          const matchesUsername = !searchParams.value.username || 
            (item.userName && item.userName.includes(searchParams.value.username))
          const matchesScenic = !searchParams.value.scenicName || 
            (item.scenicName && item.scenicName.includes(searchParams.value.scenicName))
          
          let matchesDate = true
          if (searchParams.value.date && searchParams.value.date.length === 2) {
            const [start, end] = searchParams.value.date
            const likeTime = dayjs(item.likeTime).format('YYYY-MM-DD')
            matchesDate = likeTime >= start && likeTime <= end
          }
          
          return matchesUsername && matchesScenic && matchesDate
        })
        
        total.value = filteredData.length
        tableData.value = filteredData.slice(
          (pagination.value.currentPage - 1) * pagination.value.pageSize,
          pagination.value.currentPage * pagination.value.pageSize
        )
        selectedIds.value = [] // 每次获取数据后清空选择
      } catch (error) {
        ElMessage.error('获取点赞数据失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }

    // 搜索
    const handleSearch = () => {
      pagination.value.currentPage = 1
      fetchData()
    }

    // 重置搜索
    const resetSearch = () => {
      searchParams.value = {
        username: '',
        scenicName: '',
        date: ''
      }
      handleSearch()
    }

    // 删除点赞记录
    const handleDelete = async (id) => {
      try {
        await ElMessageBox.confirm('确定删除这条点赞记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          customClass: 'delete-message-box'
        })
        
        loading.value = true
        const response = await axios.delete(`/sclike/delete/${id}`)
        if (response.data > 0) {
          ElMessage.success({
            message: '删除成功',
            customClass: 'success-message'
          })
          fetchData()
        } else {
          ElMessage.error({
            message: '删除失败',
            customClass: 'error-message'
          })
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除失败: ' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    // 批量删除点赞记录
    const handleBatchDelete = async () => {
      try {
        await ElMessageBox.confirm(`确定删除选中的 ${selectedIds.value.length} 条点赞记录吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          customClass: 'delete-message-box'
        })
        
        loading.value = true
        const response = await axios.post('/sclike/batch-delete', { ids: selectedIds.value })
        if (response.data > 0) {
          ElMessage.success({
            message: `成功删除 ${response.data} 条点赞记录`,
            customClass: 'success-message'
          })
          fetchData()
        } else {
          ElMessage.error({
            message: '删除失败',
            customClass: 'error-message'
          })
        }
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('批量删除失败: ' + error.message)
        }
      } finally {
        loading.value = false
      }
    }

    // 分页大小改变
    const handleSizeChange = (val) => {
      pagination.value.pageSize = val
      fetchData()
    }

    // 当前页改变
    const handleCurrentChange = (val) => {
      pagination.value.currentPage = val
      fetchData()
    }

    onMounted(() => {
      fetchData()
    })

    return {
      tableData,
      loading,
      total,
      selectedIds,
      searchParams,
      pagination,
      handleSearch,
      resetSearch,
      handleDelete,
      handleBatchDelete,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      formatTime,
      getSerialNumber
    }
  }
}
</script>


<style scoped lang="scss">
/* 整体容器 */
.scenic-like-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
  background-color: #f8fafc;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* 头部区域 */
.header-section {
  background: linear-gradient(135deg, #a0c4e4 0%, #7fa8d1 100%);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(160, 196, 228, 0.2);
  margin-bottom: 24px;
  color: #2c3e50;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    
    i {
      font-size: 28px;
      color: #2c3e50;
    }
  }
  
  .page-subtitle {
    margin: 5px 0 0;
    font-size: 14px;
    color: #4a5568;
  }
}

.total-count {
  .count-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e8f0;
    
    .count-label {
      font-size: 14px;
      margin-bottom: 5px;
      color: #4a5568;
    }
    
    .count-value {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
    }
  }
}

/* 搜索筛选卡片 */
.search-filter-card {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.filter-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  
  .filter-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    
    i {
      font-size: 16px;
    }
  }
  
  .filter-input {
    :deep(.el-input__inner) {
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
    }
  }
  
  .compact-date-picker {
    width: 100%;
    
    :deep(.el-input__inner) {
      height: 36px;
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range-separator) {
      line-height: 36px;
      padding: 0 8px;
      width: auto;
    }
    
    :deep(.el-date-editor .el-range-input) {
      height: 36px;
      width: 38%;
    }
    
    :deep(.el-date-editor .el-range__close-icon) {
      line-height: 36px;
    }
    
    :deep(.el-date-editor .el-range__icon) {
      line-height: 36px;
    }
  }
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  
  .search-btn {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    
    &:hover {
      opacity: 0.9;
    }
  }
  
  .reset-btn {
    border-radius: 8px;
    padding: 10px 20px;
    height: 40px;
    border: 1px solid #dcdfe6;
    
    &:hover {
      color: #4299e1;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
}
//批量删除样式
.batch-delete-btn {
  border-radius: 8px;
  padding: 10px 20px;
  height: 40px;
  
  &:hover {
    opacity: 0.9;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* 数据表格卡片 */
.data-table-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
  
  :deep(.el-table) {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    
    th {
      background-color: #f8fafc !important;
      font-weight: 600;
      color: #4a5568;
    }
    
    td {
      padding: 12px 0;
    }
    
    .el-table__row:hover {
      background-color: #f0f4f8;
    }
  }
}

.username {
  font-weight: 500;
  color: #2c3e50;
}

.scenic-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  
  i {
    font-size: 18px;
    color: #4299e1;
  }
  
  .scenic-name {
    font-size: 15px;
    font-weight: 500;
    color: #3182ce;
  }
}

.time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #718096;
  
  i {
    font-size: 16px;
  }
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 15px 0;
  
  :deep(.el-pagination) {
    .btn-prev, .btn-next {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    
    .el-pager li {
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      margin: 0 4px;
      background: white;
      
      &.active {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
      }
    }
    
    .el-pagination__jump {
      .el-input__inner {
        border-radius: 8px;
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-group {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    justify-content: center;
  }
}
</style>

<style>
/* 全局样式覆盖 */
.delete-message-box {
  border-radius: 12px !important;
  
  .el-message-box__header {
    padding: 20px 20px 10px;
  }
  
  .el-message-box__content {
    padding: 15px 20px;
  }
  
  .el-message-box__btns {
    padding: 10px 20px 20px;
  }
}

.success-message {
  border-radius: 8px !important;
  background: #f0f9eb !important;
  border: none !important;
}

.error-message {
  border-radius: 8px !important;
  background: #fef0f0 !important;
  border: none !important;
}
</style>